
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>童星库</title>

    <!-- Bootstrap core CSS -->
    <link href="../css/bootstrap-theme.css" rel="stylesheet">
    <link href="../css/bootstrap.css" rel="stylesheet">

    <link href="../lib/zcity.css" rel="stylesheet">
    <link href="../css/bootstrap-datetimepicker.css" rel="stylesheet">
    <link href="../css/common.css" rel="stylesheet">
    <link href="../css/college.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body class="page star">

    <nav class="navbar navbar-default" role="navigation">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">
            <img class="logo" src="../images/logo.png" alt="...">
          </a>
          <!-- <button type="button" class="navbar-toggle " data-toggle="collapse"
                  data-target="#example-navbar-collapse">
              <span class="sr-only">切换导航</span>
              <span class="icon-bar top-bar"></span>
              <span class="icon-bar bottom-bar"></span>
              <span class="icon-bar"></span>
          </button> -->

          <img class="menu-switch" src="../images/index-menu.png" alt="..." />
          <!-- <a class="navbar-brand" href="#">菜鸟教程</a> -->
        </div>
        <div class="collapse navbar-collapse" id="example-navbar-collapse">
            <img class="closeNav" src="../images/mobile-phone-close.png" alt="..." />
            <ul class="nav navbar-nav navbar-right">
              <li><a href="../index.html">首页</a></li>
              <li><a href="../childStar/childNews.html">新闻资讯</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">童星学院 <span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li><a href="../college/brand.html">品牌介绍</a></li>
                  <li><a href="../college/team.html">公司团队</a></li>
                  <li><a href="../college/join.html">机构加盟</a></li>
                  <li><a href="../college/cooperation.html">商务合作</a></li>
                  <li><a href="../college/contactUs.html">联系我们</a></li>
                </ul>
              </li>
              <li ><a href="../childStar/childStar.html">童星通告</a></li>
              <li class="active"><a href="./star.html">童星库</a></li>
              <li ><a href="../childStar/childStarInfo.html">我的</a></li>
              <li class="search">
                <img class="search_icon" src="../images/search.png" alt="...">
              </li>
               <li class="reg_login">
                <div class="reg_login"  aria-label="...">
                  <!-- <button type="button" class="btn btn-default login">登录</button> -->
                  <a class="login" target="_blank" href="../login.html">登录</a>
                </div>
              </li>
              <li class="reg_login">
                <div class="reg_login"  aria-label="...">
                  <!-- <button type="button" class="btn btn-default regist">注册</button> -->
                  <a class="regist" target="_blank"  href="../register.html">注册</a>
                </div>
              </li>
            </ul>

            <div class="search_warp">
              <input type="text" />
              <span class="search_commit">搜索</span>
            </div>
          </div>
        </div>
     </nav>

      <div class="page_first">
        <img src="../images/star_01.jpg" alt="...">
      </div>

    <!-- <div class="jumbotron"> -->
      <div class="container form_wrap">
        <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
          <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingOne">
              <h4 class="panel-title">
                <span class="panel_name">童星选择</span>
                <a class="take_up" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                  收起
                  <img src="../images/shouqi.png" />
                </a>             
              </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
              <div class="panel-body">
                <ul class="list-group">
                  <li class="list-group-item">
                    <div class="item sex">
                      <span class="name">性别：</span>
                      <span class="all option current">不限</span>
                      <span class="man option">男</span>
                      <span class="woman option">女</span>
                    </div>
                  </li>
                  <li class="list-group-item">
                    <div class="item age">
                      <span class="name">年龄：</span>
                      <span class="all option current">不限</span>
                      <span class="all option onlyPc">3-5岁</span>
                      <span class="man option onlyPc">6-8岁</span>
                      <span class="woman option onlyPc">9-12岁</span>
                      <span class="woman option onlyPc">13-18岁</span>
                      <input type="text" name="" class="form-control start"><i class="icon_line">-</i>
                      <input type="text" name="" class="form-control end"><i class="icon_line">岁</i>
                    </div>
                  </li>
                  <li class="list-group-item">
                    <div class="item height">
                      <span class="name">身高：</span>
                      <span class="all option current">不限</span>
                      <span class="all option onlyPc">60-80cm</span>
                      <span class="man option onlyPc">81-100cm</span>
                      <span class="woman option onlyPc">101-140cm</span>
                      <span class="woman option onlyPc">141-180cm</span>
                      <span class="woman option onlyPc">181cm以上</span>
                      <input type="text" name="" class="form-control start"><i class="icon_line">-</i>
                      <input type="text" name="" class="form-control end"><i class="icon_line">cm</i>
                    </div>
                  </li>
                  <li class="list-group-item">
                    <div class="item weight">
                      <span class="name">体重：</span>
                      <span class="all option current">不限</span>
                      <span class="all option onlyPc">20-30kg </span>
                      <span class="man option onlyPc">31-40kg</span>
                      <span class="woman option onlyPc">41-50kg</span>
                      <span class="woman option onlyPc">51-60kg</span>
                      <span class="woman option onlyPc">61kg以上</span>
                      <input type="text" name="" class="form-control start"><i class="icon_line">-</i>
                      <input type="text" name="" class="form-control end"><i class="icon_line">kg</i>
                    </div>
                  </li>
                  <li class="list-group-item">
                    <div class="item shoes">
                      <span class="name">鞋码：</span>
                      <span class="all option current">不限</span>
                      <span class="all option onlyPc">9-10码</span>
                      <span class="man option onlyPc">11-14码</span>
                      <span class="woman option onlyPc">15-18码</span>
                      <span class="woman option onlyPc">19-22码</span>
                      <span class="man option onlyPc">23-28码</span>
                      <span class="woman option onlyPc">28-34码</span>
                      <span class="woman option onlyPc">35码以上</span>
                      <input type="text" name="" class="form-control start"><i class="icon_line">-</i>
                      <input type="text" name="" class="form-control end"><i class="icon_line">码</i>
                    </div>
                  </li>
                  <li class="list-group-item">
                    <div class="item birthday">
                      <span class="name">生日：</span>
                     <!--  <input style="width: 30%;" type='text' class='form-control selectData' id='date' name='date' value='' data-date-format="yyyy-mm-dd"> -->
                      <input size="14" type="text" class='form-control selectData' value="" placeholder="请选择">
                    </div>
                  </li>
                  <li class="list-group-item">
                    <div class="item exam">
                      <span class="name">考级：</span>
                      <div>
                        <span class="all option current">不限</span>
                        <span class="all option">一级</span>
                        <span class="man option">二级</span>
                        <span class="woman option">三级</span>
                        <span class="woman option">四级</span>
                        <span class="man option">五级</span>
                        <span class="woman option">六级</span>
                      </div>
                    </div>
                  </li>
                  <li class="list-group-item">
                    <div class="item country">
                      <span class="name">国籍：</span>
                      <div>
                        <span class="all option current">不限</span>
                        <span class="all option">中国</span>
                        <span class="man option">外籍</span>
                        <span class="woman option">混血</span>
                        <span class="woman option">少数民族</span>
                      </div>

                    </div>
                  </li>
                  <li class="list-group-item">
                    <div class="item blend">
                      <span class="name">标签：</span>
                      <div>
                        <span class="all option current">不限</span>
                        <span class="all option">混血</span>
                        <span class="man option">外籍 </span>
                        <span class="woman option">大眼睛</span>
                        <span class="woman option">单眼皮</span>
                        <span class="man option">小胖子</span>
                        <span class="woman option">双胞胎</span>
                        <span class="woman option">日韩范</span>
                        <span class="man option">古风</span>
                        <span class="woman option">阳光 </span>
                      </div>

                    </div>
                  </li>
                  <li class="list-group-item">
                    <div class="item art">
                      <span class="name">才艺：</span>
                      <div>
                        <span class="all option current">不限</span>
                        <span class="all option">主持</span>
                        <span class="man option">唱歌</span>
                        <span class="woman option">走秀</span>
                        <span class="woman option">流行舞</span>
                        <span class="man option">民族舞蹈</span>
                        <span class="woman option">现代乐器</span>
                        <span class="woman option">传统乐器</span>
                        <span class="man option">相声</span>
                        <span class="woman option">戏剧</span>
                        <span class="man option">武术</span>
                        <span class="woman option">秒哭</span>
                        <span class="woman option">老演员</span>
                        <span class="man option">书法</span>
                      </div>

                    </div>
                  </li>
                  <li class="list-group-item" style="z-index: 2;">
                    <div class="item address">
                      <span class="name">地区：</span>
                      <div class="zcityGroup" city-range="{'level_start':1,'level_end':3}"></div>
                    </div>
                  </li>
                  <li class="list-group-item" style="z-index: 1;">
                    <div class="item time">
                      <span class="name">抵达时间：</span>
                      <span class="all option current">一天</span>
                      <span class="all option">多天</span>
                    </div>
                  </li>
                </ul>

                <button type="button" class="btn btn-default submit_btn">确定</button>
                <button type="button" class="btn btn-default clear_btn">清空</button>
              </div>
            </div><!--折叠面板内容-->
          </div>
        </div><!--面板-->
    </div><!--wrap -->

    <!-- 童星库 -->
    <div class="jumbotron imgList">
      <div class="container library">
        <h3 class="title line center">童星库</h3>
        <p class="subtitle center">Child star library</p>
        <div class="list">

            <div class="panel panel-default">
              <a href="details.html"><img src="../images/tx6.jpg"></a>
              <div class="txt_content">
                <h6 class="name">林诗童</h6>
                <p class="desc">2017年“昂洋杯”少儿模特大赛 50强</p>
                <div class="info">
                  <span class="text">已获得点赞：<i>800</i></span>
                  <span class="flag"> <img class="agree_icon" src="../images/icon_stick_def.png"></span>
                </div>
              </div>
            </div>

             <div class="panel panel-default">
              <a href="details.html"><img src="../images/tx1.jpg"></a>
              <div class="txt_content">
                <h6 class="name">陈馨玥</h6>
                <p class="desc">2017年“昂洋杯”少儿模特大赛 50强</p>
                <div class="info">
                  <span class="text">已获得点赞：<i>800</i></span>
                  <span class="flag"> <img class="agree_icon" src="../images/icon_stick_def.png"></span>
                </div>
              </div>
            </div>

             <div class="panel panel-default">
              <a href="details.html"><img src="../images/tx2.jpg"></a>
              <div class="txt_content">
                <h6 class="name">陈逸文</h6>
                <p class="desc">2017年“昂洋杯”少儿模特大赛 50强</p>
                <div class="info">
                  <span class="text">已获得点赞：<i>800</i></span>
                  <span class="flag"> <img class="agree_icon" src="../images/icon_stick_def.png"></span>
                </div>
              </div>
            </div>

             <div class="panel panel-default">
              <a href="details.html"><img src="../images/tx3.jpg"></a>
              <div class="txt_content">
                <h6 class="name">金一诺</h6>
                <p class="desc">2017年“昂洋杯”少儿模特大赛 50强</p>
                <div class="info">
                  <span class="text">已获得点赞：<i>800</i></span>
                  <span class="flag"> <img class="agree_icon" src="../images/icon_stick_def.png"></span>
                </div>
              </div>
            </div>

             <div class="panel panel-default">
              <a href="details.html"><img src="../images/tx4.jpg"></a>
              <div class="txt_content">
                <h6 class="name">李长啸</h6>
                <p class="desc">2017年“昂洋杯”少儿模特大赛 50强</p>
                <div class="info">
                  <span class="text">已获得点赞：<i>800</i></span>
                  <span class="flag"> <img class="agree_icon" src="../images/icon_stick_def.png"></span>
                </div>
              </div>
            </div>

        </div>
        <div class="list">

            <div class="panel panel-default">
              <a href="details.html"><img src="../images/tx5.jpg"></a>
              <div class="txt_content">
                <h6 class="name">林柯丞</h6>
                <p class="desc">2017年“昂洋杯”少儿模特大赛 50强</p>
                <div class="info">
                  <span class="text">已获得点赞：<i>800</i></span>
                  <span class="flag"> <img class="agree_icon" src="../images/icon_stick_def.png"></span>
                </div>
              </div>
            </div>

             <div class="panel panel-default">
              <a href="details.html"><img src="../images/tx7.jpg"></a>
              <div class="txt_content">
                <h6 class="name">陆静怡</h6>
                <p class="desc">2017年“昂洋杯”少儿模特大赛 50强</p>
                <div class="info">
                  <span class="text">已获得点赞：<i>800</i></span>
                  <span class="flag"> <img class="agree_icon" src="../images/icon_stick_def.png"></span>
                </div>
              </div>
            </div>

             <div class="panel panel-default">
              <a href="details.html"><img src="../images/tx8.jpg"></a>
              <div class="txt_content">
                <h6 class="name">尚颖仪</h6>
                <p class="desc">2017年“昂洋杯”少儿模特大赛 50强</p>
                <div class="info">
                  <span class="text">已获得点赞：<i>800</i></span>
                  <span class="flag"> <img class="agree_icon" src="../images/icon_stick_def.png"></span>
                </div>
              </div>
            </div>

             <div class="panel panel-default">
              <a href="details.html"><img src="../images/tx9.jpg"></a>
              <div class="txt_content">
                <h6 class="name">申屠韩茜</h6>
                <p class="desc">2017年“昂洋杯”少儿模特大赛 50强</p>
                <div class="info">
                  <span class="text">已获得点赞：<i>800</i></span>
                  <span class="flag"> <img class="agree_icon" src="../images/icon_stick_def.png"></span>
                </div>
              </div>
            </div>

             <div class="panel panel-default">
              <a href="details.html"><img src="../images/tx10.jpg"></a>
              <div class="txt_content">
                <h6 class="name">王乙</h6>
                <p class="desc">2017年“昂洋杯”少儿模特大赛 50强</p>
                <div class="info">
                  <span class="text">已获得点赞：<i>800</i></span>
                  <span class="flag"> <img class="agree_icon" src="../images/icon_stick_def.png"></span>
                </div>
              </div>
            </div>

        </div>
        <div class="list">

            <div class="panel panel-default">
              <a href="details.html"><img src="../images/tx11.jpg"></a>
              <div class="txt_content">
                <h6 class="name">吴钰滢</h6>
                <p class="desc">2017年“昂洋杯”少儿模特大赛 50强</p>
                <div class="info">
                  <span class="text">已获得点赞：<i>800</i></span>
                  <span class="flag"> <img class="agree_icon" src="../images/icon_stick_def.png"></span>
                </div>
              </div>
            </div>

             <div class="panel panel-default">
              <a href="details.html"><img src="../images/tx12.jpg"></a>
              <div class="txt_content">
                <h6 class="name">夏钱钱</h6>
                <p class="desc">2017年“昂洋杯”少儿模特大赛 50强</p>
                <div class="info">
                  <span class="text">已获得点赞：<i>800</i></span>
                  <span class="flag"> <img class="agree_icon" src="../images/icon_stick_def.png"></span>
                </div>
              </div>
            </div>

             <div class="panel panel-default">
              <a href="details.html"><img src="../images/tx13.jpg"></a>
              <div class="txt_content">
                <h6 class="name">徐嘉亨</h6>
                <p class="desc">2017年“昂洋杯”少儿模特大赛 50强</p>
                <div class="info">
                  <span class="text">已获得点赞：<i>800</i></span>
                  <span class="flag"> <img class="agree_icon" src="../images/icon_stick_def.png"></span>
                </div>
              </div>
            </div>

             <div class="panel panel-default">
              <a href="details.html"><img src="../images/tx14.jpg"></a>
              <div class="txt_content">
                <h6 class="name">杨熙辰</h6>
                <p class="desc">2017年“昂洋杯”少儿模特大赛 50强</p>
                <div class="info">
                  <span class="text">已获得点赞：<i>800</i></span>
                  <span class="flag"> <img class="agree_icon" src="../images/icon_stick_def.png"></span>
                </div>
              </div>
            </div>
        </div>

        <div class="see_all">查看全部</div>

      </div> <!-- /container -->
    </div>



    <footer class="foot">
      <div class="container">
        <div class="row">
          <div class="col-md-6 wxCode">
            <div class="wxWrap">
              <div class="pub">
                <img class="wx_01" src="../images/wx_01.jpg">
                <p>微信公众号</p>
              </div>
              <div class="sma">
                <img src="../images/wx_02.jpg">
                <p>小程序</p>
              </div>
            </div>
          </div>
          <div class="col-md-6 info" >
            <p>童星学院  |  版权声明  |  隐私保障  |  商业合作  |  加入我们  |  联系方式</p>
            <p>咨询热线：0579-8690 8770</p>
            <p>地址：浙江省金华市东阳市横店明清宫苑内</p>
            <p>Copyright ＠东阳市横店影视城微电影有限公司, All Rights Reserved   浙ICP备00000000号-1</p>
          </div>
        </div>
      </div>
    </footer>
    <script src="../js/jquery.min.js"></script>
    <script src="../lib/zcity.js"></script>
    <script src="../js/bootstrap.js"></script>
    <script src="../js/bootstrap-datetimepicker.js"></script>

  </body>
</html>

<script type="text/javascript">
  $(function(){
    var star = $('.star');
    var wrap = star.find('.form_wrap');
    var page = $('.page')
    var clearBtn = page.find('.clear_btn');

    var sex = star.find('.sex');
    var age = star.find('.age');
    var height = star.find('.height');
    var weight = star.find('.weight');
    var shoes = star.find('.shoes');
    var birthday = star.find('.birthday');
    var exam = star.find('.exam');
    var country = star.find('.country');
    var blend = star.find('.blend');
    var art = star.find('.art');
    var address = star.find('.address');
    var time = star.find('.time');
    var forObj = {
      sex:[],
      age:[],
      height:[],
      weight:[],
      shoes:[],
      birthday:[],
      exam:[],
      country:[],
      blend:[],
      art:[],
      address:[],
      time:[],
    }

    var searchWarp = page.find('.search_warp');

     //search
     $('.search_icon').on('click',function(){
      // alert('33');
      searchWarp.show();
    });
      //搜索铵钮
    $('.search_warp').find('.search_commit').on('click',function(){
     
      if(searchWarp.find('input').val() == ''){
        alert('搜索值不能为空');
        return false;
      }
      searchWarp.hide();
    });
    
    // var datepicker = {
    //     language: "zh-CN",
    //     autoclose: true,//选中之后自动隐藏日期选择框
    //     clearBtn: true,//清除按钮
    //     todayBtn: true,//今日按钮
    //     format: "yyyy-mm-dd"
    // }

    var checkout = $('.selectData').datetimepicker({
        minView: "month",
        language: "zh-CN",
        autoclose: true,//选中之后自动隐藏日期选择框
        clearBtn: true,//清除按钮
        todayBtn: true,//今日按钮
        format: "yyyy-mm-dd"//日期格式，详见 http://bootstrap-datepicker.readthedocs.org/en/release/options.html#format
    });

    var city = zcityrun('.zcityGroup');
    $('.address').find('input').eq(0).val('北京')
    $('.address').find('input').eq(1).val('北京1')
    $('.address').find('input').eq(2).val('北京2')
    // var checkout = $('.selectData').datepicker({
    //   onRender: function(date) {
    //     return '';
    //   }
    // }).on('changeDate', function(ev) {
    //   // checkout.hide();
    // }).data('datepicker');

    wrap.find('.option').on('click',function(){

      if($(this).hasClass('current')){
        $(this).removeClass('current')
      }else{
 
        if($(this).parent().parent().hasClass('blend') || $(this).parent().parent().hasClass('art')){
          $(this).addClass('current')
        }else{
          $(this).addClass('current')
          $(this).siblings().removeClass('current')
        }
        
      }
    })
     // $('#collapseOne').collapse('hide')
     agreeIt()

    //清空表单
    clearBtn.on('click',function(){
      page.find('.list-group span.option').removeClass('current')
      page.find('.list-group .list-group-item input').val('')
    })

     //表单提交
    $('.submit_btn').on('click',function(){
      
      //点击前先初始化
      var forObj = {
        sex:[],
        age:[],
        height:[],
        weight:[],
        shoes:[],
        birthday:[],
        exam:[],
        country:[],
        blend:[],
        art:[],
        address:[],
        time:[],
      }

  
      sex.find('.option').map(function(index,item){
        if($(item).hasClass('current')){
          forObj.sex.push($(item).text())
        }        
      });
      
      if(age.find('.start').val() != '' && age.find('.end').val() != ''  ){
        forObj.age.push(age.find('.start').val()+'-'+ age.find('.end').val())
      }else{
        age.find('.option').map(function(index,item){
          if($(item).hasClass('current')){
            forObj.age.push($(item).text())
          }        
        });
      }
     
      if(height.find('.start').val() != '' && height.find('.end').val() != ''  ){
        forObj.height.push(height.find('.start').val()+'-'+ height.find('.end').val())
      }else{
        height.find('.option').map(function(index,item){
          if($(item).hasClass('current')){
            forObj.height.push($(item).text())
          }        
        });
      }
      
      if(weight.find('.start').val() != '' && weight.find('.end').val() != ''  ){
        forObj.weight.push(weight.find('.start').val()+'-'+ weight.find('.end').val())
      }else{
        weight.find('.option').map(function(index,item){
          if($(item).hasClass('current')){
            forObj.weight.push($(item).text())
          }        
        });
      }


      if(shoes.find('.start').val() != '' && shoes.find('.end').val() != ''  ){
        forObj.shoes.push(shoes.find('.start').val()+'-'+ shoes.find('.end').val())
      }else{
        shoes.find('.option').map(function(index,item){
          if($(item).hasClass('current')){
            forObj.shoes.push($(item).text())
          }        
        });
      }

      exam.find('.option').map(function(index,item){
        if($(item).hasClass('current')){
          forObj.exam.push($(item).text())
        }        
      });

      country.find('.option').map(function(index,item){
        if($(item).hasClass('current')){
          forObj.country.push($(item).text())
        }        
      });

      blend.find('.option').map(function(index,item){
        if($(item).hasClass('current')){
          forObj.blend.push($(item).text())
        }        
      });

      art.find('.option').map(function(index,item){
        if($(item).hasClass('current')){
          forObj.art.push($(item).text())
        }        
      });

      time.find('.option').map(function(index,item){
        if($(item).hasClass('current')){
          forObj.time.push($(item).text())
        }        
      });

      $('.address').find('input').map(function(index,item){
        forObj.address.push($(item).val());
      });



      forObj.birthday.push(checkout.val())

      if(forObj.birthday[0] == ''){
        alert('生日不能为空');
        return false;
      }

      if(forObj.address[0] == ''){
        alert('地址不能为空');
        return false;
      }

    

    });
  })

  function agreeIt(){
    var page =$('.page')
    page.find('.imgList .agree_icon').on('click',function(){
      $(this).attr('src','../images/icon_stick.png')
    })
  }




  $(function(){
   $('.closeNav').on('click',function(){
      $('#example-navbar-collapse').find('.navbar-nav').hide();
      $(this).hide();
    })

    $('.menu-switch').on('click',function(){
      $('#example-navbar-collapse').show();
      $('#example-navbar-collapse').find('.navbar-nav').show();
      $('.closeNav').show();
    })
  })
</script>
